<template>
	<view class="vehicle-manage">
		<gyd-navbar back-color="#fff">
			<template #default>
				<uni-easyinput v-model="keyword" placeholder="输入关键词" :clearable="false" @input="search"></uni-easyinput>
			</template>
		</gyd-navbar>

		<view class="vehicle-list">
			<view class="vehicle-item" v-for="(item,index) in list" :key="index">
				<image class="thumb" :src="item.car_img" mode="aspectFill"></image>
				<view class="info">
					<view class="NO">编号：{{item.car_num}}</view>
					<view class="tags">
						<text class="tag">{{item.status_txt}}</text>
					</view>
					<view class="btn-group">
						<u-button type="error" size="mini" plain>使用记录</u-button>
						<u-button type="success" size="mini" plain
							@click="pageRoute('/merchantPages/car-manage/car-form?car_id='+item.id)">编辑</u-button>
					</view>
				</view>
			</view>
		</view>

		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" @fabClick="fabClick" />

		<!-- <view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block
					@click="pageRoute('/merchantPages/car-manage/car-form')">添加车辆</u-button>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '车辆管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		master_id: 0,
		keyword: '',
		isMore: true,
		list: [],
		pattern: {
			buttonColor: '#007AFF',
			iconColor: '#fff',
			icon: 'plusempty',
		},
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('master_id')) {
			console.log('传递参数', opt.master_id);
			state.master_id = opt.master_id;
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [{
			id: 1,
			car_img: '',
			car_num: 'GYD01',
			status_txt: '未使用'
		}, {
			id: 2,
			car_img: '',
			car_num: 'GYD02',
			status_txt: '使用中'
		}, {
			id: 3,
			car_img: '',
			car_num: 'GYD03',
			status_txt: '未使用'
		}];
	}

	function search() {
		console.log('搜索', state.keyword);
	}

	function fabClick() {
		pageRoute('/merchantPages/car-manage/car-form')
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		master_id,
		keyword,
		isMore,
		list,
		pattern
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #eff6ff 0%, #f7f7fb 54%);
	}

	.vehicle-manage {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.vehicle-list {
			padding: $m24;

			.vehicle-item {
				@include f-between;
				margin-bottom: $m24;
				padding: $m12;
				background-color: #fff;
				border-radius: $radius-16;

				&:last-child {
					margin-bottom: 0;
				}

				.thumb {
					width: 140rpx;
					height: 140rpx;
					background-color: #F7F7FB;
					border-radius: $radius-8;
				}

				.info {
					position: relative;
					height: 140rpx;
					flex: 1;
					margin-left: $m24;

					.NO {
						color: $main-color;
						font-weight: 500;
						font-size: $font-30;
					}

					.tags {
						margin-top: $m8;

						.tag {
							@include f-center($block: inline-flex);
							padding: 0.2em 0.4em;
							background-color: #F7F7FB;
							font-size: $font-22;
							color: $primary-color;
							border-radius: $radius-8;
						}
					}

					.btn-group {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						position: absolute;
						width: 100%;
						bottom: 0;

						button {
							margin-left: 10rpx;

						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>